import Common from './Common'
import MuseUI from './Muse-UI'
import MintUI from './Mint-UI'
import iViewUI from './iview-UI' //获取各个组件的js(组件基础数据)

var getTemplate = function (info, _attr = {}, _slots = {}, slotTag) {
  let component
  switch (info.ui) {
    case 'Muse-UI':
      component = MuseUI[info.name](_attr, _slots, info)
      break
    case 'Mint-UI':
      component = MintUI[info.name](_attr, _slots, info)
      break
    case 'iview-UI':
      /**
       * iViewUI[info.name]是一个方法,handle(_attr, _slots),
       * 该方法返回:{ template, attributes, slots }
       */
      //

      component = iViewUI[info.name](_attr, _slots, info, slotTag)

      break
    case 'Common':
      component = Common[info.name](_attr, _slots, info)
      break
  }

  //为了不让二次获取模板时丢失slot信息

  component.slot = component.attributes.slot.value

  //为了不让slot出现在属性面板
  delete component.attributes.slot

  //没有class属性的，添加class属性
  if (!component.attributes.class) {
    component.attributes.class = {
      type: 'text',
      value: '',
    }
  }

  //添加组件标识 (info.id是唯一标识)
  component.template = component.template.replace(' ', ' data-component-active tabIndex="0" ')
  component.info = info
  return component
}
/**
 *
 * @param {*} slots 格式: {default: [{id: "b0116ee0-a767"}, {id: "b0116ee0-a767"}]}
 * @returns
 */
var getSlotTemplate = function (slots, slotTag) {
  let inner = ''
  /**
   * components为缓存的组件数组
   * [
   *    {
   *        template: "<Button data-component-active tabIndex=</Button>",
   *        attributes: {{label: {…}, type: {…},slot: "prepend"},
   *        parentId: "20278673-b152",
   *        slots: [default: [{ id: '06d753d3-f1dc' }],
   *        slot: "prepend",
   *        info: {id: "f5c39bf1-d70f",name: "Button",ui: "iview-UI"}
   *    }
   * ]
   */
  let components = JSON.parse(JSON.stringify(_Vue.$store.state.components))
 
  Object.keys(slots).forEach((itemKey) => {
    // ['default']
    slots[itemKey].forEach(({ id },index) => {
      // 找到组件数组中匹配当前传入slots中id的组件
      let component = components.find((component) => component.info.id === id)
      // let children = []
      // // 将组件中的slots中的id推入到children中
      // Object.keys(component.slots).forEach((item2) => {
      //   component.slots[item2].forEach((item2) => children.push(item2))
      // })
      // 设置当前组件的slot，getTemplate中根据这个属性设置模板的slot，不存在则不设置
      component.attributes.slot = component.slot
      if(slotTag){
      
        component = getTemplate(component.info, component.attributes, component.slots,slotTag[index])
      }else{
        component = getTemplate(component.info, component.attributes, component.slots)
      }
      
      //为嵌套的组件添加id属性 具备id属性 才能选中后属性视图内容变更
      if (component.template.indexOf(`id="${id}"`) == -1)
        component.template = component.template.replace(' ', ` id="${id}" `)
      inner += component.template
    })
  })
  // 各个组件嵌套在一起的template,如:<Col> <Button id="27245661-3041"></Button><Button id="27245661-3042"></Button></Col>
  return inner
}
var getStringTypeAttr = function (attributes) {
  // value为空的不添加到模板中
  let stringAttr = ''
  Object.keys(attributes).forEach((key) => {
    let attrKey
    //这些类型都不用加bind
    let arr = ['text', 'selection', 'icon', 'iconSelect', 'color']
    /**
     * 如果属性是为静态属性,即不能通过属性面板来控制的,则属性不用设置为动态的
     */
    if (arr.includes(attributes[key].type) || attributes[key].notBind) {
      attrKey = key
    } else {
      attrKey = `:${key}`
    }
    // 当属性值存在时,才需要设置属性
    let attr = attributes[key].value ? `${attrKey}='${attributes[key].value}'\n` : ''
    stringAttr += attr
  })
  /**
   * 例: label="Button" :disabled="true"
   */
  return stringAttr
}
export { getSlotTemplate, getTemplate, getStringTypeAttr }
